<template>
  <div class="payment-page">
    <div class="payment-container">
      <h2>订单支付</h2>
      <div class="order-info">
        <p>订单号：{{ $route.query.orderNo }}</p>
        <p>支付金额：¥{{ $route.query.amount }}</p>
      </div>
      
      <div class="payment-methods">
        <h3>选择支付方式</h3>
        <div class="method-list">
          <div 
            class="method-item"
            :class="{ active: selectedMethod === 'wechat' }"
            @click="selectedMethod = 'wechat'"
          >
            <i class="iconfont">&#xe63f;</i>
            <span>微信支付</span>
          </div>
          <div 
            class="method-item"
            :class="{ active: selectedMethod === 'alipay' }"
            @click="selectedMethod = 'alipay'"
          >
            <i class="iconfont">&#xe636;</i>
            <span>支付宝</span>
          </div>
        </div>
      </div>

      <div class="action">
        <button 
          class="pay-btn"
          @click="handlePayment"
          :disabled="!selectedMethod"
        >
          确认支付
        </button>
      </div>
    </div>
  </div>
</template>

<script setup>
import { ref } from 'vue'
import { useRouter, useRoute } from 'vue-router'
import { ElMessage } from 'element-plus'

const router = useRouter()
const route = useRoute()
const selectedMethod = ref('')

const handlePayment = async () => {
  try {
    // 获取订单信息
    const orderInfo = {
      orderNo: route.query.orderNo,
      amount: route.query.amount,
      paymentMethod: selectedMethod.value,
      paymentTime: new Date().toLocaleString()
    }

    // 获取现有订单列表或初始化
    let orderList = JSON.parse(localStorage.getItem('orderList') || '[]')
    
    // 添加新订单
    orderList.push(orderInfo)
    
    // 保存到 localStorage
    localStorage.setItem('orderList', JSON.stringify(orderList))

    // 显示购票成功提示
    ElMessage({
      message: '购票成功！正在跳转到个人中心...',
      type: 'success',
      duration: 2000
    })
    
    // 延迟跳转，让用户看到成功提示
    setTimeout(() => {
      router.push({
        path: '/profile',
        query: {
          newOrder: 'true',
          timestamp: new Date().getTime() // 添加时间戳确保刷新
        }
      })
    }, 1500) // 1.5秒后跳转
  } catch (error) {
    console.error('支付失败:', error)
    ElMessage.error('支付失败，请重试')
  }
}
</script>

<style scoped>
.payment-page {
  min-height: 100vh;
  background: #f5f5f5;
  padding: 20px;
}

.payment-container {
  max-width: 600px;
  margin: 0 auto;
  background: #fff;
  padding: 20px;
  border-radius: 8px;
  box-shadow: 0 2px 12px rgba(0, 0, 0, 0.1);
}

h2 {
  text-align: center;
  margin-bottom: 30px;
  color: #333;
}

.order-info {
  background: #f8f8f8;
  padding: 15px;
  border-radius: 4px;
  margin-bottom: 30px;
}

.order-info p {
  margin: 10px 0;
  color: #666;
}

.payment-methods h3 {
  margin-bottom: 20px;
  color: #333;
}

.method-list {
  display: flex;
  gap: 20px;
  margin-bottom: 30px;
}

.method-item {
  flex: 1;
  padding: 15px;
  border: 1px solid #ddd;
  border-radius: 4px;
  cursor: pointer;
  display: flex;
  align-items: center;
  gap: 10px;
  transition: all 0.3s;
}

.method-item:hover {
  border-color: #409EFF;
}

.method-item.active {
  border-color: #409EFF;
  background: #ecf5ff;
}

.method-item i {
  font-size: 24px;
}

.action {
  text-align: center;
}

.pay-btn {
  padding: 12px 40px;
  background: #409EFF;
  color: white;
  border: none;
  border-radius: 4px;
  font-size: 16px;
  cursor: pointer;
  transition: all 0.3s;
}

.pay-btn:hover {
  background: #66b1ff;
}

.pay-btn:disabled {
  background: #a0cfff;
  cursor: not-allowed;
}
</style> 